<template>
  <div class="videoplay-content">
    <div class="left" @click="toLoop('l')">
      <el-icon><ArrowLeft /></el-icon>
    </div>
    <div class="right" @click="toLoop('r')">
      <el-icon><ArrowRight /></el-icon>
    </div>
    <div class="right-top-box">
      <el-select
        v-model="value"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- <div
        class="one"
        @click="setLayout(1)"
        :class="{ active: currentActive == 1 }"
      >
        <div class="icon"></div>
      </div>
      <div
        class="more l4"
        @click="setLayout(4)"
        :class="{ active: currentActive == 4 }"
      >
        <div class="icon" v-for="item in 4" :key="item"></div>
      </div>
      <div
        class="more l6"
        @click="setLayout(6)"
        :class="{ active: currentActive == 6 }"
      >
        <div class="icon" v-for="item in 6" :key="item"></div>
      </div>
      <div
        class="more l9"
        @click="setLayout(9)"
        :class="{ active: currentActive == 9 }"
      >
        <div class="icon" v-for="item in 9" :key="item"></div>
      </div> -->
    </div>
    <div class="video-content">
      <!-- 单场景 -->
      <template v-if="currentActive === 1">
        <div
          class="out-box one"
          v-for="(item, index, idx) in playList"
          :key="index"
        >
          <p class="name-device" v-if="idx === 0">
            {{ item.type }}{{ item.index }}
          </p>
          <div
            class="video-box"
            style="
              width: 100%;
              height: 100%;
              position: relative;
              background: rgba(142, 191, 255, 0.32);
              border-radius: 12px;
            "
            v-if="currentActive == 1 && idx === 0"
          >
            <videoRtsp
              v-if="item.originDeviceCode"
              :showToolbar="0"
              :width="1575"
              :height="680"
              :vid="item.originDeviceCode"
            >
            </videoRtsp>
            <div class="empty" v-else>
              <img src="@/assets/images/novideo.png" />
              <p>暂无视频</p>
            </div>
          </div>
        </div>
      </template>

      <!-- 4场景 -->
      <div class="video-box-layout-4" v-if="currentActive === 4">
        <div
          class="out-box"
          v-for="(item, key, index) in playList"
          :key="index"
        >
          <p class="name-device" v-if="index < 4">
            {{ item.type }}{{ item.index }}
          </p>
          <div class="video-box">
            <videoRtsp
              v-if="item.originDeviceCode && index < 4"
              :showToolbar="0"
              :width="768"
              :height="318"
              :vid="item.originDeviceCode"
            >
            </videoRtsp>
            <div class="empty" v-else>
              <img src="@/assets/images/novideo.png" />
              <span>暂无视频</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 6场景 -->
      <div class="video-box-layout-6" v-if="currentActive === 6">
        <div
          class="out-box"
          v-for="(item, key, index) in playList"
          :key="index"
        >
          <p class="name-device" v-if="index < 6">
            {{ item.type }}{{ item.index }}
          </p>
          <div class="video-box">
            <videoRtsp
              v-if="item.originDeviceCode && index < 6"
              :showToolbar="0"
              :width="502"
              :height="318"
              :vid="item.originDeviceCode"
            >
            </videoRtsp>
            <div class="empty" v-else>
              <img src="@/assets/images/novideo.png" />
              <span>暂无视频</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 9场景 -->
      <div class="video-box-layout-9" v-if="currentActive === 9">
        <div
          class="out-box"
          v-for="(item, key, index) in playList"
          :key="index"
        >
          <p class="name-device" v-if="index < 9">
            {{ item.type }}{{ item.index }}
          </p>
          <div class="video-box">
            <videoRtsp
              v-if="item.originDeviceCode && index < 9"
              :showToolbar="0"
              :width="502"
              :height="195"
              :vid="item.originDeviceCode"
            >
            </videoRtsp>
            <div class="empty" v-else>
              <img src="@/assets/images/novideo.png" />
              <span>暂无视频</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getSenceList } from "@/api/common.js";
import VideoRtsp from "@/components/video/videoRtsp.vue";
import { Log } from "mars3d";
// let pointList = ref({});

let currentActive = ref(1);
let timer = null; // 添加 timer 变量声明

let allData = ref([]);
let allSence = ref({}); //所有的场景
let pointList = ref({});
let playList = ref({});
let state = ref({});
let currentIndex = 0; //用于判断当前是第一轮数据

function getFirstNProperties(obj, start = 0, n) {
  const keys = Object.keys(obj).slice(start, n);
  return keys.reduce((result, key) => {
    result[key] = obj[key];
    return result;
  }, {});
}

// 设置布局
const setLayout = async (num) => {
  if (timer) {
    clearInterval(timer);
  }
  currentIndex = 0;
  playList.value = {};
  currentActive.value = num;
  // let list = allData.value;
  // let obj = {};
  // for (let i = 0; i < list.length; i++) {
  //   if (obj[list[i].sceneCode]) {
  //     obj[list[i].sceneCode].push(list[i]);
  //   } else {
  //     obj[list[i].sceneCode] = [];
  //     obj[list[i].sceneCode].push(list[i]);
  //   }
  // }
  pointList.value = await getFirstNProperties(allSence.value, 0, num);
  setFirstData();
};
// 设置轮询
const toloopVideo = () => {
  // console.log('开始轮询')
  let arr = state.value;
  timer = setInterval(() => {
    // console.log(arr)
    for (let key in arr) {
      setTimeout(() => {
        let idx = arr[key][0];
        playList.value[key] = {
          ...arr[key][2][idx],
          index: state.value[key][1] + "-" + (idx + 1),
        };
        state.value[key][0] = idx + 1;
        if (state.value[key][0] >= state.value[key][1]) {
          state.value[key][0] = 0;
        }
      }, 10000);
      // }, 1000);
    }
    // console.log(playList.value);
    // 在这里再去给把playList 对象转成数组就行了
  }, 80000);
  // }, 3000);
};

// 设置第一轮数据
const setFirstData = () => {
  for (let key in pointList.value) {
    playList.value[key] =
      pointList.value[key].length > 0
        ? {
            ...pointList.value[key][0],
            index: pointList.value[key].length + "-" + 1,
          }
        : {};
    state.value[key] = [0, pointList.value[key].length, pointList.value[key]];
  }
  console.log(playList);
  toloopVideo();
};
function ensureObjectLength(obj, defaultValue) {
  const keys = Object.keys(playList.value);
  if (keys.length === 0) return;
  const currentLength = keys.length;
  if (currentLength < currentActive.value) {
    for (let i = currentLength; i < currentActive.value; i++) {
      playList.value[`key${i}`] = { type: "." }; // 使用默认值补充
    }
  }
  console.log(playList.value);
}
watch(
  playList,
  (newval) => {
    ensureObjectLength();
  },
  {
    deep: true,
  }
);

// 获取数据
const getData = async () => {
  try {
    let { data } = await getSenceList({});
    let list = data.senceCameras;
    let obj = {};
    for (let i = 0; i < list.length; i++) {
      if (obj[list[i].sceneCode]) {
        obj[list[i].sceneCode].push(list[i]);
      } else {
        obj[list[i].sceneCode] = [];
        obj[list[i].sceneCode].push(list[i]);
      }
    }
    allData.value = list;
    allSence.value = obj;
    pointList.value = obj;
    setFirstData();
  } catch (e) {
    console.error(e);
  }
};
// 在组件挂载时调用getData初始化数据
onMounted(() => {
  getData();
});

// 修改数据
const toLoop = async (type) => {
  let list = [];
  let numbersence = Object.keys(allSence).length || 0;
  if (type == "l") {
    currentIndex = currentIndex - 1;
    if (currentIndex.value < 0) {
      currentIndex = currentIndex;
    }
    // list = allData.value.slice(
    //   currentIndex * currentActive.value,
    //   currentActive.value
    // );
    pointList.value = await getFirstNProperties(
      allSence.value,
      currentIndex * currentActive.value,
      currentActive.value
    );
  } else {
    currentIndex = currentIndex + 1;
    if (currentIndex >= numbersence / currentActive.value) {
      currentIndex = numbersence / currentActive.value;
    }
    // list = allData.value.slice(
    //   currentIndex * currentActive.value,
    //   currentActive.value
    // );
    pointList.value = await getFirstNProperties(
      allSence.value,
      currentIndex * currentActive.value,
      currentActive.value
    );
  }
  // let obj = {};
  // for (let i = 0; i < list.length; i++) {
  //   if (obj[list[i].sceneCode]) {
  //     obj[list[i].sceneCode].push(list[i]);
  //   } else {
  //     obj[list[i].sceneCode] = [];
  //     obj[list[i].sceneCode].push(list[i]);
  //   }
  // }
  pointList.value = list;
  setFirstData();
};
</script>

<style lang="scss" scoped>
.videoplay-content {
  width: 100%;
  height: 100%;
  // width: 1660px;
  // height: 797px;
  padding: 28px 50px;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  position: relative;
  padding-top: 48px;
  .left {
    width: 50px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #858c9b;
    cursor: pointer;
    color: #fff;
    line-height: 64px;
    text-align: center;
    font-size: 30px;
    border-radius: 50% 0 0 50%;
    &:hover {
      background: #249fff;
    }
  }
  .right {
    width: 50px;
    height: 60px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #858c9b;
    cursor: pointer;
    color: #fff;
    line-height: 64px;
    text-align: center;
    font-size: 30px;
    border-radius: 0% 50% 50% 0;
    &:hover {
      background: #249fff;
    }
  }
  .out-box {
    position: relative;
    &.one {
      width: 100%;
      height: calc(100% - 40px);
    }
    .name-device {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      margin-bottom: 10px;
    }
  }
  .video-box-layout-4 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0;
    .out-box {
      width: calc(50% - 10px);
      height: calc(50% - 10px);
      // border: 1px solid red;
    }
    .video-box {
      width: 100%;
      height: calc(100% - 30px);
      // width: calc(50% - 20px);
      // height: calc(50% - 20px);
      background: rgba(142, 191, 255, 0.32);
      position: relative;
    }
  }
  .video-box-layout-6 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .out-box {
      width: calc(33% - 10px);
      height: calc(50% - 10px);
      // border: 1px solid red;
    }
    .video-box {
      width: 100%;
      height: calc(100% - 30px);
      background: rgba(142, 191, 255, 0.32);
      position: relative;
    }
  }
  .video-box-layout-9 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .out-box {
      width: calc(33% - 10px);
      height: calc(33% - 10px);
      // border: 1px solid red;
    }
    .video-box {
      width: 100%;
      height: calc(100% - 30px);
      background: rgba(142, 191, 255, 0.32);
      position: relative;
    }
  }
  .empty {
    width: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #2263bf;
    text-align: center;
  }
  .video-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .right-top-box {
    position: absolute;
    right: 64px;
    top: 20px;
    display: flex;
    align-items: center;
    .one,
    .more {
      width: 36px;
      height: 36px;
      cursor: pointer;
      margin-left: 16px;
      &.active {
        background: rgba(142, 191, 255, 0.32);
        border-radius: 4px;
        border: 1px solid rgba(44, 132, 255, 0.3);
        .icon {
          background: #2263bf !important;
        }
      }
    }
    .one {
      padding: 7px;
      .icon {
        width: 22px;
        height: 22px;
        background: #9ac4ff;
      }
    }
    .more {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 7px;
      gap: 4px;
      &.l4 {
        .icon {
          width: 40%;
          height: 40%;
          background: #9ac4ff;
        }
      }
      &.l6 {
        padding: 4px;
        gap: 2px;
        .icon {
          width: 20%;
          height: 40%;
          background: #9ac4ff;
        }
      }
      &.l9 {
        padding: 4px;
        gap: 2px;
        .icon {
          width: 20%;
          height: 20%;
          background: #9ac4ff;
        }
      }
    }
  }
}
</style>
